<template>
  <div>
    <div class="input">
      <input type="key" placeholder="请输入小区或商圈名称" v-model="search" />
    </div>
    <div>
      <div class="main" v-for="item in newdata" :key="item.housesid">
        <div class="left">
          <navigator
            :url="`../purchagse/purchase?title=${item.housetitle}&img=${item.imgurl}&bedroom=${item.bedroom}&sqname=${item.sqname}&heading=${item.heading}&livingroom=${item.livingroom}&toilet=${item.toilet}&buildarea=${item.buildarea}&qyname=${item.qyname}`"
          >
            <img :src="item.imgurl" alt="" />
          </navigator>
          <span>{{ item.housetag }}</span>
        </div>
        <div class="right">
          <p>{{ item.housetitle }}</p>
          <span
            >{{ item.bedroom }}室{{ item.livingroom }}厅{{item.toilet}}卫</span>
          <span>{{ item.buildarea }}m²</span>
          <span>{{ item.heading }}</span>
          <span>{{ item.qyname }}</span>
          <span>{{ item.sqname }}</span>
          <div class="tag">
            <span v-for="(ite,index) in item.tagwall" :key="index">{{
              ite
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getreting } from "@/services";
export default {
  data() {
    return {
      list: [],
      search: "",
      newdata: [],
    };
  },
 
    async mounted() {
      let result = await getreting();
      if (result.status == 200) {
        this.list = result.data;
      }
    },
     computed: {
    fSearch() {
      console.log(this.search);
      if (this.search) {
        this.newdata = this.list.list.filter((item) =>
          item.housetitle.includes(this.search)
        );
        console.log(this.newdata);
      } else {
        this.newdata = this.list.list;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input {
  > input {
    display: flex;
    margin-left: 30px;
    height: 30px;
    border: solid 1px #eee;
    background: rgba(241, 235, 235, 0.5);
    width: 80%;
    border-radius: 15px;
    font-size: 13px;
    padding-left: 10px;
  }
}
.main {
  display: flex;
  padding: 10px;
  .left {
    display: flex;
    flex-direction: column;
    span {
      font-size: 12px;
      position: relative;
      bottom: 120px;
      background: rgb(250, 235, 25);
      width: 30px;
    }
    img {
      width: 120px;
      height: 120px;
      border-radius: 5px;
    }
  }
  .right {
    margin-left: 10px;
    width: 60%;
    height: 100%;
    p {
      font-size: 13px;
    }
    span {
      font-size: 12px;
      color: #666;
      padding: 0 2px;
    }
    .tag {
      > span {
        margin: 0 2px;
        padding: 0 2px;
        background: #eee;
      }
    }
  }
}
</style>
